<template>
    <div class="detail-bottom">
        <div class="detail-iconfont">
            <div>
                <i class="iconfont icon-shop"></i>
                <span>店铺</span>
            </div>
            <div>
                <i class="iconfont icon-message"></i>
                <span>客服</span>
            </div>
            <div>
                <i class="iconfont icon-like"></i>
                <span>收藏</span>
            </div>
        </div>
        <div class="detail-cart" @click="addCart()">
            加入购物车
        </div>
        <div class="detail-buy">
            <input type="button" value="立即购买">
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        addCart(){
            this.$showAddCart();
        }
    }
}
</script>
<style lang="less" scoped>
.detail-bottom{
    position:absolute;
    bottom:0rem;
    width:100%;
    box-sizing:border-box;
    height:1rem;
    display:flex;
    flex-flow:row nowrap;
    >.detail-iconfont{
        flex:3;
        display:flex;
        justify-content:space-around;
        text-align:center;
        >div>i{
            font-size:0.4rem;
            padding-bottom:0.1rem;
        }
        >div>span{
            display:block;
        }
        >div{
            padding:0rem 0.2rem;
            border-right:1px solid @gray-light;
        }
        >div:last-child{
            border:none;
        }
    }
    >.detail-cart{
        flex:2;
        text-align:center;
        line-height:1rem;
        color:@pink;
        background-color:@gray-light;
        font-size:0.35rem;
    }
    >.detail-buy{
        flex:2;
        >input{
            width:100%;
            height:100%;
            background-color:@pink;
            color:@white;
            border:none;
            font-size:0.35rem;
        }
    }
}
</style>